<template>
  <div class="create-workorder-container">
    <el-card>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        @submit.prevent="handleSubmit"
      >
        <!-- 客户信息 -->
        <el-form-item label="客户姓名" prop="customer_name">
          <el-input v-model="form.customer_name" placeholder="请输入客户姓名" />
        </el-form-item>

        <el-form-item label="联系电话" prop="customer_phone">
          <el-input v-model="form.customer_phone" placeholder="请输入联系电话" />
        </el-form-item>

        <!-- 工单内容 -->

        <el-form-item label="地址" prop="customer_address">
          <el-input v-model="form.customer_address" type="textarea" placeholder="请描述具体问题" />
        </el-form-item>
        <el-form-item label="问题描述" prop="user_claim">
          <el-input
            v-model="form.user_claim"
            type="textarea"
            :rows="4"
            placeholder="请描述具体问题"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="isLoading" :disabled="isLoading" native-type="submit">
            {{ isLoading ? '提交中...' : '提交工单' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { createWorkOrder } from '@/api/workOrder'
import { onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 导入 Pinia 存储实例
// 1. Declare formRef at top level (outside handleSubmit)
const formRef = ref(null) // This will link to the template's ref="formRef"

const isLoading = ref(false)
const form = ref({
  customer_name: '丁珂',
  customer_phone: '13333333333',
  customer_address: '上海',
  customer_id: '',
  user_claim: '没钱了没钱了没钱了没钱了',
})

const rules = {
  customerName: [
    { required: true, message: '请输入客户姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请描述问题', trigger: 'blur' },
    { min: 10, max: 500, message: '描述长度在 10 到 500 个字符', trigger: 'blur' },
  ],
}

// 初始化时获取用户信息并设置 customer_id
onMounted(async () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo')) // 假设用户信息存储在 localStorage 中
  if (userInfo) {
    form.value.customer_id = userInfo._id // 设置 customer_id 为用户的 ID
  }
})
// 表单提交方法
const handleSubmit = async () => {
  isLoading.value = true
  // 先校验表单
  // 2. Use the top-level formRef instead of creating a new one
  await formRef.value.validate((valid) => {
    // Now formRef.value is not null
    if (!valid) return false
  })

  // 调用存储中的 create 方法提交工单

  try {
    const res = await createWorkOrder(form.value) // 假设 createWorkOrder 是一个异步方法
    if (res.code === 201) {
      // 提交成功，显示成功消息
      ElMessage.success('工单提交成功！')
    }
    // 提交成功后重置表单
    form.value = { customerName: '', phone: '', description: '', priority: 'medium' }
    isLoading.value = false
  } catch (error) {
    // 提交失败，处理错误
    console.error('工单提交失败:', error)
    ElMessage.success('工单提交失败:', error)
    isLoading.value = false
  }
}
</script>

<style scoped>
.create-workorder-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.error-message {
  margin-top: 15px;
}
</style>
